/**
 * @desc: 批量删除订单数量弹窗
 * @author: fj
 */
import React, { useState, useEffect } from 'react';
import { Button, InputNumber, Checkbox, Form } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';

const BtnDeleteModal = ({ visible, handleCancel, handleOk }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };

  useEffect(() => {
    form.resetFields();
  }, [visible]);

  //取消
  const onCancel = () => {
    handleCancel();
  };

  //确定
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        handleOk(value);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <CommonModal
      title="批量删除订单数量"
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={458}
    >
      <div>
        <Form
          {...layout}
          form={form}
          name="btn-delete"
        >
          <Form.Item
            label="首序号"
            name="start"
            rules={[{ required: true, message: '请输入首序号!' }]}
          >
            <InputNumber
              style={{ width: '200px' }}
              formatter={value => value.replace('.', '')}
              min={1}
              step={1}
              placeholder="请输入"
            />
          </Form.Item>
          <Form.Item
            label="尾序号"
            name="end"
            rules={[{ required: true, message: '请输入尾序号!' }]}
          >
            <InputNumber
              style={{ width: '200px' }}
              formatter={value => value.replace('.', '')}
              min={1}
              step={1}
              placeholder="请输入"
            />
          </Form.Item>
          <Form.Item name="reversal" label=" "  colon={false}>
            <Checkbox.Group>
              <Checkbox value="true"><span style={{ display: 'inline-block', width: '120px'}}>反向删除</span></Checkbox>
            </Checkbox.Group>
          </Form.Item>
        </Form>
        <CommonLoading loading={loading} />
      </div>
    </CommonModal>
  );
};

export default BtnDeleteModal
